#sidenav-right {
  .skin-switch {
    text-align: center;
  }

  .t-color {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    cursor: pointer;
    display: inline-block;
    margin: 0;
  }
}

#sidenav-right {
  .skin-switch {
    position: absolute;
    right: 55px;
    bottom: 25px;
    z-index: 1;

    button {
      line-height: 1;
      font-size: 23px;
      margin: 0;
    }

    .dropdown-menu {
      min-width: 130px;
      height: 130px;
      border-radius: 50%;
      width: 130px;
      top: -45px;
      left: -45px;
      z-index: 1;
      .transform-origin(center);
      .scale-rotate(0, -360deg);
      .transition-duration(500ms);

      .t-color {
        position: absolute;

        &:nth-child(1) {
          top: 16px;
          right: 29px
        }
        &:nth-child(2) {
          right: 13px;
          top: 37px;
        }

        &:nth-child(3) {
          margin-top: 59px;
          right: 9px;
        }

        &:nth-child(4) {
          right: 20px;
          bottom: 26px;
        }

        &:nth-child(5) {
          right: 41px;
          bottom: 12px;
        }

        &:nth-child(6) {
          left: 45px;
          bottom: 11px;
        }

        &:nth-child(7) {
          bottom: 24px;
          left: 23px;
        }

        &:nth-child(8) {
          left: 10px;
          bottom: 47px;
        }

        &:nth-child(9) {
          left: 11px;
          top: 37px;
        }

        &:nth-child(10) {
          left: 28px;
          top: 16px;
        }
        &:nth-child(11) {
          right: 57px;
          top: 8px;
        }
      }
    }

    &.open {
      .dropdown-menu {
        .scale-rotate(1, 0deg);
      }
    }
  }
}

.t-color {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  cursor: pointer;
  .transition(all);
  .transition-duration(200ms);

  &:hover {
    opacity: 0.8;
    .scale(1.3)
  }
}

.current-theme(@color) {
  background-color: @color !important;
}

@array2: "lightblue" @m-lightblue-bg, "bluegrey" @m-bluegrey-bg, "blue" @m-blue-bg, "purple" @m-purple-bg, "orange" @m-orange-bg, "cyan" @m-cyan-bg, "green" @m-green-bg, "teal" @m-teal-bg, "pink" @m-pink-bg, "red" @m-red-bg, "indigo" @m-indigo-bg,"deeppurple" @m-deeppurple-bg,"lightgreen" @m-lightgreen-bg,"lime" @m-lime-bg,"yellow" @m-yellow-bg ,"amber" @m-amber-bg,"deeporange" @m-deeporange-bg,"grey" @m-grey-bg,"brown" @m-brown-bg;

.for(@array2);
.-each(@mvalue) {
  @mname: extract(@mvalue, 1);
  @mcolor: extract(@mvalue, 2);
  [data-theme=@{mname}] {
    background-color: @mcolor !important;
  }
  [md-theme=@{mname}] {
    .btn.btn-primary:not(.active):not(:hover):not(:active):not(:focus){
      background-color: @mcolor !important;
    }
  }
}
